<template>
	<button @click="goBack">返回</button>
	<h4>购票支付 </h4>
	<div class="container">
		
		<div class="left-side">
			<img src="/public/j1.png" class="img-small" />
		</div>
		<div class="right-side">
			<table class="tab" v-for="index in xq" :key="index.id">
				<tr>
					<th>{{index.name}}</th>
					<td>{{index.name_new}}</td>
				</tr>
				<tr>
					<th>{{index.jq}}</th>
					<td>北宋时期，杨宗保在抗击西夏的战争中不幸阵亡，杨家女眷在佘太君的带领下，<br />毅然决定出征保家卫国。在经历了与西夏王的激烈战斗后，杨门女将最终凯旋而归。</td>
				</tr>
				<tr>
					<th>{{index.time}}</th>
					<td>{{index.time_new}}</td>
				</tr>
				<tr>
					<th>{{index.price}}</th>
					<td>{{index.price_new}}</td>
				</tr>
				<tr>
					<th>{{index.amount}}</th>
					<td>{{index.amount_new}}</td>
				</tr>
				<tr>
					<th>{{index.buy}}</th>
					<td>{{index.buy_new}}</td>
				</tr>
				<tr>
					<th>{{index.pay}}</th>
					<td>{{index.payprice}}</td>
				</tr>
			</table>
			<el-button type="primary" @click="buy" class="btn">确定支付</el-button>
		</div>
	</div>
	<!-- </div> -->
	
</template>

<script setup>
	import {
		useRouter
	} from 'vue-router';
	const router = useRouter()
	const goBack = () => {
		router.back()
	}
	const xq = ([
		{
			name: "演出名称：",
			name_new: "杨门将女",
			jq: "剧情价绍：",
			time: "演出时间：",
			time_new: "2024年11月21日 19:30",
			price: "票价：",
			price_new: "￥150",
			amount: "当前余量：",
			amount_new: "100张",
			buy: "购买数量：",
			buy_new: "1(一人仅限一张)",
			pay: "支付金额：",
			payprice: "￥100.00",
		}
	])
	const buy = () => {
		alert('支付成功')
	}
</script>

<style lang="less" scoped>
	.tab {
		line-height: 50px;
		margin-left: 30px;
	}
	.btn{
		margin-left: 30px;
	}

	// .red-button {
	// 	width: 300px;
	// 	height: 40px;
	// 	border-radius: 10px;
	// 	background-color: red;
	// 	border: none;
	// 	margin-left: 800px;
	// 	// margin-bottom: 400px;
	// }

	.img-small {
		width: 550px;
		height: 700px;
	}

	.container {
		display: flex;
		// background-color: none;
		// background-image: url(/public/bg2.png);
		// background-size: 50% 50%;
	}

	// .left-side {}

	.right-side {
	// 	// width: 70%;
		margin-right: 300px;
		margin-top: 50px;
	}
</style>